import React, { useState, useEffect, useCallback } from 'react';
import { useHistory } from 'react-router-dom'
import {
    putSofPdPlanActInsertPlan
} from '../../api'
import { getSofContractFindCap } from "../../../../Api/listUrl";
import { sysUploadUrl } from '../../../../Api/fileUrl'
import { AddPlanAll } from './style'
import {
    PageHeader,
    Form,
    message,
    Button,
    Upload,
    Cascader,
    Input,
    InputNumber,
    DatePicker
} from 'antd'
import {
    UploadOutlined
} from '@ant-design/icons';
import moment from 'moment'
const { TextArea } = Input;

/**
 * @description: 添加生产计划页面
 * @author: xiaoxujs
 * @updata: xiaoxujs（2021-09-03) 添加预计完成时间
 */

const AddPlan = () => {
    const history = useHistory()
    const [form] = Form.useForm()
    const [buttonLoading, setButtonLoading] = useState(false)
    const [productList, setProductList] = useState([])
    const productFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofContractFindCap()
                if (code === '20000') {
                    setProductList(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [],
    )
    useEffect(() => {
        productFun()
    }, [productFun])
    const onFinish = (values) => {
        ; (async () => {
            setButtonLoading(true)
            if (values.files) {
                let arr = [];
                values.files.fileList.forEach(element => {
                    arr.push(element.response.data)
                });
                values.files = arr;
            }
            values.conNo = values.product[0]
            values.pdplanId = values.product[1]
            //处理日期数据
            values.expectEndDate = moment(values.expectEndDate).format('YYYY-MM-DD');
            delete values.product
            const { code, msg } = await putSofPdPlanActInsertPlan(values)
            if (code === '20000') {
                message.success('生产计划提交成功')
                setButtonLoading(false)
                history.go('-1')
            } else {
                setButtonLoading(false)
                message.error(msg)
            }
        })()
    };
    //上传
    const props = {
        name: 'file',
        action: sysUploadUrl(),
        headers: {
            authentication: sessionStorage.getItem("token")
        },
        data: { folder: '/contract' },
        onChange(info) {
            if (info.file.status === 'done') {
                message.success(`${info.file.name} 上传成功`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };
    const fieldNames = { label: 'name', value: 'id', children: 'plans' }
    return <AddPlanAll>
        <PageHeader
            className="site-page-header"
            onBack={() => history.go('-1')}
            title="添加生产计划"
        />
        <Form
            labelCol={{ span: 3 }}
            wrapperCol={{ span: 16 }}
            onFinish={onFinish}
            form={form}
        >
            <Form.Item
                label="产品"
                name="product"
                rules={[{ required: true, message: '请选择产品!' }]}
            >
                <Cascader options={productList} placeholder="请选择产品" fieldNames={fieldNames} />
            </Form.Item>
            <Form.Item
                label="押金金额（元）"
                name="ribAccounts"
                rules={[{ required: true, message: '请输入押金金额!' }]}
            >
                <InputNumber />
            </Form.Item>
            <Form.Item
                label="预计发货时间"
                name="expectEndDate"
                rules={[{ required: true, message: '请选择预计完成时间!' }]}
            >
                <DatePicker />
            </Form.Item>
            <Form.Item
                label="备注"
                name="remake"
            >
                <TextArea showCount maxLength={100} />
            </Form.Item>
            <Form.Item
                label="上传文件"
                name="files"
            >
                <Upload {...props}>
                    <Button icon={<UploadOutlined />}>请上传文件</Button>
                </Upload>
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                <Button type="primary" htmlType="submit" loading={buttonLoading}>
                    提交申请
                </Button>
            </Form.Item>
        </Form>
    </AddPlanAll>
}

export default AddPlan